import * as React from "react";
import {PropTypes} from "react";
import { RegisterPage } from "../root";
import { schema as IndexSchema } from "./list";
import { schema as createSchema } from "./create";
import { schema as editSchema } from "./edit";
import { schema as viewSchema } from "./view";
import { schema as verifySchema } from "./verify";
import { schema as blacklistSchema } from "./blacklist";
import { schema as aclSchema } from "./acl";
import { connect } from "react-redux";
import { fetchOrgSug } from "../../../actions/org";
import * as cx from "classnames";
import * as onClickOutside from "react-onclickoutside";
import { push } from "react-router-redux";
import * as find from 'lodash/find';

@connect(
  state => ({
    fetching: state.org.fetching,
    options: state.org.data
  }),
  {
    fetchOrgSug,
    push
  }
)
@onClickOutside
export class OrgSelector extends React.Component {
  static defaultProps = {
    wrapperComponent: "div"
  };

  constructor(props) {
    super(props);
    this.state = {
      keywords: "",
      isOpen: false,
      viewValue: '所有机构',
      value: props.location.query.org_id
    };

    this.toggleOpen = this.toggleOpen.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    this.props.fetchOrgSug();
  }

  componentWillReceiveProps(nextProps) {
      const props = this.props;

      if (props.options !== nextProps.options || props.location.query !== nextProps.location.query && nextProps.options) {
          const option = find(nextProps.options, item => item.value == nextProps.location.query.org_id);

          this.setState({
              value: nextProps.location.query.org_id,
              viewValue: option ? option.label : '所有机构'
          });
      }
  }

  handleClickOutside() {
    this.close();
  }

  toggleOpen() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  close() {
    this.setState({
      isOpen: false
    });
  }

  handleSelect(option) {
    const location = this.props.location;
    this.setState({
        isOpen: false,
        viewValue: option.label,
        value: option.value
    });
    this.props.push({
        pathname: location.pathname,
        query: {
            ...location.query,
            org_id: option.value
        }
    })
  }

  render() {
    const {
      wrapperComponent: WrapperComponent,
      options,
      fetching
    } = this.props;

    return (
      <WrapperComponent
        className={cx(this.props.className, "dropdown", {
          open: this.state.isOpen
        })}
      >
        <a className="dropdown-toggle" onClick={this.toggleOpen}>
          <i className="fa fa-fw fa-plus visible-xs-inline-block" />
          <span>{this.state.viewValue}</span>
          <span className="caret" />
        </a>

        <ul className="dropdown-menu" style={{height: '300px', overflow: 'scroll'}}>
          {fetching || !options ? (
            <i className="fa fa-spinner fa-spin fa-2x fa-fw" />
          ) : (
            [
                <li key="-1"  className={this.state.value == '' ? 'active' : null}  onClick={() => this.handleSelect({label: '所有机构', value: ''})}><a>所有机构</a></li>,
                <li key="-2" className="divider" />
            ].concat(options.map((option, key) => (
              <li key={key} className={this.state.value == option.value ? 'active' : null} onClick={() => this.handleSelect(option)}>
                <a>{option.label}</a>
              </li>
            ))
          ))}
        </ul>
      </WrapperComponent>
    );
  }
}

RegisterPage({
  path: "team",
  label: "团队管理",
  icon: "fa fa-cubes",
  acl: 'team:list',
  NavComponent: OrgSelector,
  NavComponentTest: ({user}) => user.type == 4,
  children: [
    {
      path: "list",
      label: "团队列表",
      schema: IndexSchema,
      acl: 'team:list',
      url: "/team/list?org_id=${org_id}"
    },
    {
      path: "create",
      label: "创建团队",
      schema: createSchema,
      acl: 'team:create',
      url: "/team/create?org_id=${org_id}"
    },
    {
      path: "/team/edit/:id",
      label: "修改团队",
      acl: 'team:edit',
      schema: editSchema
    },
    {
      path: "/team/view/:id",
      label: "查看团队",
      acl: 'team:view',
      schema: viewSchema
    },
    {
      path: "/team/acl/:id",
      label: "权限配置",
      acl: 'team:setting',
      schema: aclSchema
    },
    {
      path: "verify",
      label: "审核团队",
      acl: 'team:create',
      schema: verifySchema,
      url: "/team/verify?org_id=${org_id}"
    },
    {
      path: "balcklist",
      label: "黑名单",
      schema: blacklistSchema,
      acl: 'team:balcklist',
      url: "/team/balcklist?org_id=${org_id}"
    }
  ]
});
